<!-- ！！！管理员需要先选择楼层再选择教室来查询教室
    1.该界面是教室使用信息管理界面
    2.管理员可以选择某一个教室，选择第几周星期几第几节课，显示该状态下面所有的教室情况，指定该教室是空闲、已预约、正在使用
    3.有25个教室，16周，一周7天，一天十二小节，共33600条数据。
    4.界面同时要显示出选择的状态下，空闲的教室有多少，已经预约的教室有多少，正在使用的教室有多少。
后端人员需要注意的是，如果您发现表格没有包括所有条目，请检查该文件末尾 js函数中 table.init函数中，limit是否修改，默认最大条数是10条。-->
{#<!DOCTYPE html>#}
<html>

<head>
    {% load static %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>教室使用信息管理</title>
    <link rel="stylesheet" href="{%static 'layui/css/layui.css'%}">
    <link rel="stylesheet" href="{%static 'css/admin_useClassroom.css'%}">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">智慧教室管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    <span id="username">{{ name }}</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user_center/">个人中心</a></dd>
                    <dd><a href="/logout/">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/admin_userManagement/">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="student/">学生</a></dd>
                        <dd><a href="teacher/">教师</a></dd>
                        {% if state == 4 %}
                            <dd><a href="college_admin/">院级管理员</a></dd>
                        {% endif %}
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/classroom-basic-info/">教室基本信息管理</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/admin_useInfo_new/">教室使用信息管理</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/course-schedule/">教室排课管理</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/adminreserve/">教室预约管理
                        <span class="layui-badge-dot"></span></a>
                </li>
            </ul>
        </div>
    </div>

        <div class="layui-body">

            <div class="basicInfoHeader">
                <p>教室使用信息管理</p>
            </div>
            <!-- selectBox中放的是选择层数、教室、提交、重置的盒子 -->
            <blockquote class="selectBox">
                <!-- 用一个表单，提交选择的楼层和教室 -->
                <div>
                    <p>
                        请选择需要查询的教室、时间或状态
                    </p>
                </div>
                <form class="layui-form" action="#" >
{#                    {% csrf_token %}#}
                    <!-- 选择楼栋 -->
                    <label class="layui-form-label">请选择楼栋</label>
                    <div class="layui-input-block floor">
                        <select name="building" lay-verify="" id="rebuilding">
                            <option value="0"></option>
                            <option value="1">逸夫楼</option>
                            <option value="2">机电楼</option>
                            <option value="3">经管楼</option>
                            <option value="4">外语楼</option>
                        </select>
                    </div>
                    <!-- 选择楼层 -->
                    <label class="layui-form-label">请选择楼层</label>
                    <div class="layui-input-block floor">
                        <select name="floor" lay-verify="" id="refloor">
                            <option value="0"></option>
                            <option value="1">一楼</option>
                            <option value="2">二楼</option>
                            <option value="3">三楼</option>
                            <option value="4">四楼</option>
                            <option value="5">五楼</option>
                          </select>
                    </div>
                    <!-- 选择教室 -->
                    <label class="layui-form-label">请选择教室</label>
                    <div class="layui-input-block room">
                        <select name="room" lay-verify="" id="reroom">
                            <option value="0"></option>
                            <option value="1">01</option>
                            <option value="2">02</option>
                            <option value="3">03</option>
                            <option value="4">04</option>
                            <option value="5">05</option>
                        </select>
                    </div>
                    <label class="layui-form-label">请选择教学周</label>
                    <div class="layui-input-block week">
                        <select name="week" lay-verify="" id="reweek">
                            <option value="0"></option>
                            <option value="1">01</option>
                            <option value="2">02</option>
                            <option value="3">03</option>
                            <option value="4">04</option>
                            <option value="5">05</option>
                            <option value="6">06</option>
                            <option value="7">07</option>
                            <option value="8">08</option>
                            <option value="9">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                        </select>
                    </div>
                    <label class="layui-form-label">请选择日期</label>
                    <div class="layui-input-block day">
                        <select name="day" lay-verify="" id="reday">
                            <option value="0"></option>
                            <option value="1">星期一</option>
                            <option value="2">星期二</option>
                            <option value="3">星期三</option>
                            <option value="4">星期四</option>
                            <option value="5">星期五</option>
                            <option value="6">星期六</option>
                            <option value="7">星期日</option>
                        </select>
                    </div>
                    <label class="layui-form-label">请选择时间段</label>
                    <div class="layui-input-block time">
                        <select name="time" lay-verify="" id="retime">
                            <option value="0"></option>
                            <option value="1">第1节</option>
                            <option value="2">第2节</option>
                            <option value="3">第3节</option>
                            <option value="4">第4节</option>
                            <option value="5">第5节</option>
                            <option value="6">第6节</option>

                        </select>
                    </div>
                    <label class="layui-form-label">请选择教室状态</label>
                    <div class="layui-input-block state">
                        <select name="state" lay-verify="" id="restate">
                            <option value="0"></option>
                            <option value="1">空闲</option>
                            <option value="2">已预约</option>
                            <option value="3">使用中</option>
                        </select>
                    </div>
                    <div class="layui-input-block submitReset">
                        <button type="button" class="layui-btn" id="searchBtn"  lay-filter="formDemo" data-type="reload">立即查询</button>
{#                        <i class="layui-icon layui-icon-search" style="display:inline-block; top: 15px; margin-right: 10px;width:20px;height:20px;" data-type="reload"></i>#}
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </form>
{#                <p>{{ rlt }}</p>#}
            </blockquote>
            <fieldset class="layui-elem-field">
                <div class="classroomTableBox">
{#                    <table class="layui-table"  id="useInfo_list" lay-filter="table_data" ></table>#}
{#                    <!--设备列表操作列-->#}
{#                    <script type="text/html" id="operation">#}
{#                        <button style="margin-left: 5px" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">编辑</button>#}
                {#        <button style="margin-left: 5px" class="layui-btn layui-btn-sm layui-btn-danger" id="del" lay-event="del">删除</button>#}
{#                    </script>#}

                    <table class="layui-table"  id="useInfo_list" lay-filter="useInfoTable"></table>
                </div>
            </fieldset>
        </div>
    </div>

     <!-- 修改教室使用信息的表单 -->
    <div id="reviseUseInfo_main" style="display: none; ">
        <div class="layui-form" action="/update_useInfo_new/" method="POST" id="editForm">
{#            {% csrf_token %}#}
            <div class="layui-form-item center ">
                <div class="layui-input-block">
                    <input type="hidden" id="use_id_in" name="use_id_in">
                    <input type="hidden" id="building_id_in" name="building_id_in" >
                    <select name="update_select" id ="update_select" class="" >
                        <option value="0" >请选择教室状态</option>
                        <option value="1" >空闲</option>
                        <option value="2" >已预约</option>
                        <option value="3" >使用中</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item ">
                <div class="layui-input-block ">
                    <input type="text" id="update_remark" name="update_remark"  placeholder="请填写安排信息"  class="layui-input" value="">
                </div>
            </div>

            <div class="layui-form-item ">
                <div class="layui-input-block ">
                    <button class="layui-btn " lay-submit lay-filter="save " id="edit_useInfo">立即提交</button>
                    <button id="cancel" class="layui-btn-sm" onclick="window.close()">取消</button>
                </div>
            </div>
        </div>

    </div>

    <script src="{%static 'layui/layui.js'%}"></script>
    <script src="{%static 'jquery/jquery-3.2.1.js'%}"></script>
    <script src="{%static 'layer/layer.js'%}"></script>
    <!--设备表格按钮-->
    <script  id="operation">
        <button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
    </script>
    <script>
        //JS
        var building=null,floor=null,room=null,week=null,day=null,time=null,state=null;
        layui.use(['element', 'layer', 'util', 'form', 'table'], function () {
        var element = layui.element,
            layer = layui.layer,
            util = layui.util,
            form = layui.form,
            table = layui.table,
            $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {
                    icon: 0
                });
            },
            menuRight: function () {
                layer.open({
                    type: 1,
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt' //右上角
                    ,
                    anim: 5,
                    shadeClose: true
                });
            }
        });

        //教室使用信息表格
        table.render({
            elem: "#useInfo_list",//赋值表
            loading: false,
            height: 312,
            page: true,
            limit:50,
            cols: [[
                {field: "use_id", title: "使用信息ID" ,hide:true},
                {field: "building_id", title: "楼栋ID",hide:true},
                {field: "building_name", title: "楼栋"},
                {field: "cid", title: "教室"},
                {field: "week", title: "教学周"},
                {field: "day", title: "日期"},
                {field: "time", title: "时间段"},
                {field: "state", title: "状态"},
                {field: "remark", title: "备注"},
                {toolbar: "#operation", title: "安排教室使用"}
            ]]
        })

            //更新表格
        function reload_table(building,floor,room,week,day,time,state) {
            table.reload('useInfo_list', {
                url: '/search_useInfo_new/',
                method: "post",
                headers: {"X-CSRFToken": "{{ csrf_token }}"},
                page: true,
                where: {
                    "building": building,
                    "floor": floor,
                    "room": room,
                    "week": week,
                    "day": day,
                    "time": time,
                    "state": state
                },
                done: function (res, curr, count) {
                    if (!("flag" in res)) alert("未知错误");
                    else if (res["flag"] !== 0) alert(res["flag"]);
                    console.log(res);
                }
            })
        }

        //点击查询按钮，查询使用信息,重载上方教室使用信息的表格
        $("#searchBtn").on("click", function () {

            //检错
            building = $("#rebuilding").val();
            floor = $("#refloor").val();
            room = $("#reroom").val();
            week = $("#reweek").val();
            day = $("#reday").val();
            time = $("#retime").val();
            state = $("#restate").val();

            reload_table(building,floor,room,week,day,time,state);
        })

            //表格中，修改表单信息的操作
        table.on("tool(useInfoTable)", function (obj) {
            if (obj.event === "edit") {
                $("#use_id_in").val(obj.data.use_id);
                $("#building_id_in").val(obj.data.building_id);
                console.log(obj.data);
                //显示修改使用信息的弹窗
                index = layer.open({
                    type: 1,
                    title: "修改教室使用信息",
                    area: ['400px', '300px'],
                    shadeClose: true, //点击遮罩关闭
                    content: $("#reviseUseInfo_main"),
                    success: function (layero, index) {
                    },
                    yes: function () {
                    }
                });
            }
        })

            //修改教室使用信息
        $("#edit_useInfo").on("click", function () {
            $.ajax({
                url: "/update_useInfo_new/",
                type: "post",
                data: {
                    "use_id_in": $("#use_id_in").val(),
                    "building_id_in": $("#building_id_in").val(),
                    "update_select": $("#update_select").val(),
                    "update_remark": $("#update_remark").val()
                },
                dataType: "json",
                headers: {"X-CSRFToken": "{{ csrf_token }}"},
                success: function (res) {
                    if (!("flag" in res)) {
                        alert("未知错误");
                        return;
                    } else if (res["flag"] !== 0) {
                        alert(res["flag"]);
                        return;
                    }
                    //关闭弹窗更新表格
                    layer.close(layer.index);
                    reload_table(building,floor,room,week,day,time,state);
                },
                error: function () {
                    alert("ajax请求错误");
                }
            })
        })

    });
    </script>
    <script>
    //判断当前登录的是谁
    $.ajax({
                url: "/user/",
                method: "get",
                success: function (response) {
                    if(response.msg === 'ok'){
                        $("#username").html(response.data.username)
                    } else {
                        window.location.href = '/login'
                    }
                },
                error: function (err) {
                    window.location.href = '/login'
                }
        })
</script>
</body>

</html>